<template>
	<view class="mainPage pet-review" :style="{'padding-top': $store.state.safeArea.top + 'px', 'padding-bottom': $store.state.safeArea.bottom + 'px'}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="box1" v-if="remarkInfo.count">
				<view class="comment">
					患者评价共<text>{{remarkInfo.count}}</text>条
				</view>
				<view class="good">
					满意率<text>{{remarkInfo.rate}}</text>%
				</view>
			</view>
			
			<view class="box2" v-if="remarkInfo.score">
				<view class="item" v-for="(item,index) in remarkInfo.score" :key="index">
					<view class="first-line">
						<!-- 姓名 -->
						<view class="left">
							{{item.nickname}}
						</view>
						<view class="right">
							<!-- 评分 -->
							<image v-for="(star, i) in item.score" :key="i" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xing1.png" mode="aspectFill"></image>
						</view>
					</view>
					<!-- 内容 -->
					<view class="second-line">
						<view  v-if="item.launch==false">
						<text>{{item.content.substring(0,50)}}</text>
						<text class="qianbu" @click="launchs(index)" v-if="item.content.length>50">...全部</text>
						</view>
						<view  v-if="item.launch==true">
						<text>{{item.content}}</text>
						<text class="qianbu"  @click="launchs(index)">收起</text>
						</view>
					</view>
					
					<view class="images" v-if="item.url[0]!=''&&item.describe_type==1">
						<!-- 图片 -->
						<view class="imgs"  v-for="(imgs,indexs) in item.url" :key="indexs">
						<image v-if="indexs<3" :src="imgs" @click="previewImage(index,indexs)" mode="aspectFill"></image>
						<view class="title" v-if="item.url.length>3">
							{{item.url.length}}张
						</view>
						</view>
					</view>
					
					<view class="images" v-if="item.url[0]!=''&&item.describe_type==2">
						<!-- 图片 -->
						<view class="imgs_v"  v-for="(imgs,indexs) in item.url" :key="indexs" @click="tiaozhuanVideo(imgs)">
						<image v-if="indexs<3" :src="item.describe_coverimg" mode="aspectFill"></image>
						</view>
					</view>
					<!-- 医生回复 -->
					<view v-if="item.reply==1" class="reply">
						<text class="dreply" >医生回复:</text>
						<text style="margin-left: 10rpx;
    color: #656060;
    font-size: 26rpx;">{{item.replyContent}}</text>
						
					</view>
					
					<view class="third-line">
						<!-- 时间 -->
						<view class="time">
							{{item.time}}
						</view>
						<view class="state">
							<text v-if="item.reply==1">已回复</text>
							<text v-else class="huifu" @click="huifu(item.id,item.nickname)">回复</text>
						</view>
					</view>
				</view>
				
				<u-loadmore class="load-marTop" v-if="remarkInfo.score.length>=10" :status="status" :load-text="loadText" />
			</view>
			<view class="zanwuyuyue" v-else>
				<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
				<text>暂无评价</text>
			</view>
		</view>
	
		<u-popup  v-model="show" mode="bottom" border-radius="20" :safe-area-inset-bottom="true" negative-top="50" length="62%">
			<view class="tanchuceng" >
				<view class="title" >
					
					回复 <text>{{nickname}}</text>：
					<text class="sendout" @click="send" >发送</text>
				</view>
				<!-- <textarea :show-confirm-bar="false" :focus="true" v-model="contents" :cursor-spacing="10" placeholder="请输入回复内容..." placeholder-style="font-size: 28rpx;color: #888888;" /> -->
				<u-input v-model="contents" :type="type" :border="border" :height="height" :auto-height="autoHeight" placeholder="请输入回复内容..."  placeholder-style="color: #8a8a8a;"/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				value: '',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				title: '宠主点评',
				show:false,
				nickname:'',
				remarkInfo:"",
				contents:'',
				page:1,
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onReachBottom() {   ///page 加载
			if(that.status == 'nomore'){
				return
			}
			console.log("触底la")
			that.status = 'loading';
			that.page = ++ that.page;
			setTimeout(() => {
				that.requestData(that.page)
			}, 500)
		},
		onLoad() {
			that=this
			that.requestData(that.page)
		},
		methods: {
			huifu(score_id,nickname){
				that.show=true
				that.score_id=score_id
				that.nickname=nickname
				console.log('获取到的id',score_id)
			},
			
			requestData(page){  //https://ask.suoweilai.com/Doctor_getScoreList   医生端 - 医生端-获取好评列表
				that.$postAjax1('Doctor_getScoreList',{
					page:page
				},function(data){
					// console.log(data,99999)
					if(that.page==1){
						that.remarkInfo=data.data.data
					}else{
						that.remarkInfo.score=that.remarkInfo.score.concat(data.data.data.score)
					}
					if(data.data.data.score){
						if(data.data.data.score.length<10) that.status = 'nomore';
						else that.status = 'loading';
					}else{
						that.status = 'nomore'
					}
					console.log(data.data.data)
				})
			},
			previewImage(index,indexs) {//预览图片
				console.log(indexs)
				let photoList = that.remarkInfo.score[index].url.map(item => {
					return item;
				});
				uni.previewImage({
					current: indexs,
					urls: photoList
				});
			},
			launchs(index){
				
				that.remarkInfo.score[index].launch = !that.remarkInfo.score[index].launch
				console.log('index',index,that.remarkInfo.score[index].launch)
			},
			send(){
				that.$postAjax1('Doctor_docReply',{
					score_id:that.score_id,
					content:that.contents
				},function(data){
					that.requestData(that.page)
					that.show=false
					console.log('回复成功')
				})	
			},
			tiaozhuanVideo(src) {
				console.log('zhixingl')
				uni.navigateTo({
					url:"../browseVideo/browseVideo?src="+ src
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	.box1{
		width: 100%;
		background: #F6F6F6;
		padding: 8rpx 58rpx;
		display: flex;
		.comment,.good{
			font-size: 26rpx;
			font-weight: 400;
			color: #242424;
			line-height: 36rpx;
			margin-right: 50rpx;
			text{
				color: #ED0B0D;
			}
		}
	}
	.box2{
		padding: 0 32rpx 100rpx;
		.item{
			padding: 20rpx 0 14rpx 26rpx;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
			.first-line{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 18rpx;
				.left{
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 36rpx;
				}
				.right{
					image{
						display: inline-block;
						width: 22rpx;
						height: 20rpx;
						margin-left: 8rpx;
					}
				}
			}
			.second-line{
				font-size: 28rpx;
				font-weight: 400;
				color: #343434;
				line-height: 40rpx;
				margin-bottom: 16rpx;
				
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 2;
				// -webkit-box-orient: vertical;
				.qianbu{
					color: #517BA0;
				}
			}
			.images{
				width: 100%;
				
				.imgs{
					width: 30%; 
					display: inline-block;  
					margin: 10rpx;
					position: relative;
					image{
						width: 210rpx;
						height: 210rpx; 
					}
					.title{
						position: absolute; 
						bottom: 10px; 
						opacity: 0.5; 
						background: #8a8a8a; 
						right: 2rpx; 
						border-radius: 5rpx; 
						padding: 5rpx 8rpx; 
						color: #FFFFFF; 
						display: none;
					}
					&:nth-of-type(3){
						.title{
							display: inline-block;
						}
					}
				}
				
				.imgs_v{
					width: 30%; 
					display: inline-block;  
					margin: 10rpx;
					position: relative;
					image{
						width: 210rpx;
						height: 210rpx; 
					}
					.title{
						position: absolute; 
						bottom: 10px; 
						opacity: 0.5; 
						background: #8a8a8a; 
						right: 2rpx; 
						border-radius: 5rpx; 
						padding: 5rpx 8rpx; 
						color: #FFFFFF; 
						display: none;
					}
					&:nth-of-type(3){
						.title{
							display: inline-block;
						}
					}
				}
				
				.imgs_v::after{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 99;
					content: "";
					display: block;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: url(https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng/img/medical/inquiry/shipinbiao.png) no-repeat;
					background-size: cover;
				}
				
				
			}
			.reply{
				background: #F6F6F6; padding: 20rpx; line-height: 40rpx;
				.dreply{
					color: #F29100;
				}
			}
			.third-line{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time,.state{
					font-size: 24rpx;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 34rpx;
					.huifu{
						font-size: 24rpx;
						font-weight: 400;
						color: #FA6400;
						line-height: 34rpx;
					}
				}
			}
		}
	}

	.zanwuyuyue{
		padding-top: 450rpx;
		text-align: center;
		image{
			display: block;
			margin: auto;
			width: 220rpx;
			height: 220rpx;
			margin-bottom: 50rpx;
		}
		text{
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #959595;
		}
	}
}
.tanchuceng{
	height: 500rpx;
	width: 100%;
	background-color: #FFFFFF;
	padding: 20rpx 54rpx;
	.title{
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: #101010;
		margin-bottom: 20rpx;
		.sendout{
			float: right; color: #1492E6;
		}
	}
	textarea{
		padding: 18rpx 32rpx;
		box-sizing: border-box;
		border: 2rpx solid pink;
		width: 100%;
		height: 76rpx;
		border-radius: 10rpx;
		
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #333;
	}
}
</style>
